<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>


<html>
<head>
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script src="style/js/jquery-3.2.1.min.js"></script>
	<script src="style/js/sort.js"></script>
	<script src="style/js/holder.js"></script>
	<link rel="stylesheet" href="style/css/bootstrap.min.css">
	<%--<script src="style/js/bootstrap.min.js"></script>--%>
<link rel="stylesheet" type="text/css" href="style/css/base.css">
<link rel="stylesheet" type="text/css" href="style/css/home.css">
<script type="text/javascript" src="style/js/banner.js"></script>
<script type="text/javascript" src="style/js/ad.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<style type="text/css">
body {
	background-color: #f5f5f5;
	padding-left: 0px;
}

#contents {
	background-color: #FFF;
	padding-left: 20px;
}
</style>
</head>
<%@include file="head.jsp"%>
<div class="container" style="margin-top: 5%">

	<div id="header">


		<!-- 旋转图 -->
		<div class="header-bottom" style=" height: auto">
			<div class="sort">
				<div class="sort-channel">
					<ul class="sort-channel-list list-group">
						<li class="list-group-item"><a href="${pageContext.request.contextPath}/coursesearch?search=国学">国学</a>
							<div class="sort-detail">
								<dl class="dl-hor" >
									<dt>
										<a href="${pageContext.request.contextPath}/coursesearch?search=文学">文学</a>
									</dt>
									<dd>
										<a href="${pageContext.request.contextPath}/coursesearch?search=文学">哲理</a>
										<a href="${pageContext.request.contextPath}/coursesearch?search=语录集">语录集</a>
										<a href="">历史</a>
										<a href="${pageContext.request.contextPath}/coursesearch?search=史书">史书</a>
									</dd>
								</dl>
							</div>
						</li>

						<li class="list-group-item"><a href="${pageContext.request.contextPath}/coursesearch?search=计算机与互联网">技术</a>
							<div class="sort-detail">
								<dl class="dl-hor">
									<dt>
										<a href="${pageContext.request.contextPath}/coursesearch?search=计算机理论">计算机理论</a>
									</dt>
									<dd>
										<a href="${pageContext.request.contextPath}/coursesearch?search=操作系统">操作系统</a>
										<a href="${pageContext.request.contextPath}/coursesearch?search=编程">编程</a>
										<a href="${pageContext.request.contextPath}/coursesearch?search=人工智能">人工智能</a>
									</dd>
								</dl>
							</div>
						</li>

						<li class="list-group-item"><a href="${pageContext.request.contextPath}/coursesearch?search=语言文字">语言</a>
							<div class="sort-detail">
								<dl class="dl-hor">
									<dt>
										<a href="${pageContext.request.contextPath}/coursesearch?search=中国">中国</a>
									</dt>
									<dd>
										<a href="${pageContext.request.contextPath}/coursesearch?search=语言发展">语言发展</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=理论"> 理论</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search= 历书"> 历书 通用</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=通史">通史</a>
									</dd>
								</dl>
							</div>
						</li>

						<li class="list-group-item"><a href="${pageContext.request.contextPath}/coursesearch?search=闲置书籍">综合</a>
							<div class="sort-detail">
								<dl class="dl-hor">
									<dt>
										<a href="${pageContext.request.contextPath}/coursesearch?search=英语">英语</a>
									</dt>
									<dd>
										<a href="${pageContext.request.contextPath}/coursesearch?search=四六级">四六级</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=充电器">商务英语</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=听力">听力</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=考研">考研</a>
									</dd>
								</dl>
								<dl class="dl-hor">
									<dt>
										<a href="${pageContext.request.contextPath}/coursesearch?search=考研">考研</a>
									</dt>
									<dd>
										<a href="${pageContext.request.contextPath}/coursesearch?search=计算机">计算机</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=自动化">自动化</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=金融">金融</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=其他">其他</a>
									</dd>
								</dl>
								<dl class="dl-hor">
									<dt>
										<a href="${pageContext.request.contextPath}/coursesearch?search=体育">体育</a>
									</dt>
									<dd>
										<a href="${pageContext.request.contextPath}/coursesearch?search=足球">足球</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=乒乓球">乒乓球</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=篮球">篮球</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=羽毛球">羽毛球</a>
									</dd>
								</dl>
								<dl class="dl-hor">
									<dt>
										<a href="${pageContext.request.contextPath}/coursesearch?search=经典">经典</a>
									</dt>
									<dd>
										<a href="${pageContext.request.contextPath}/coursesearch?search=历史">历史</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=名人">名人</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=政治">政治</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=小说">小说</a>
									</dd>
								</dl>
							</div>
						</li>

						<li class="list-group-item"><a href="${pageContext.request.contextPath}/coursesearch?search=装饰品">装饰品</a>
							<div class="sort-detail">
								<dl class="dl-hor">
									<dt>
										<a href="${pageContext.request.contextPath}/coursesearch?search=配饰">配饰</a>
									</dt>
									<dd>
										<a href="${pageContext.request.contextPath}/coursesearch?search=腰带">腰带</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=皮带">皮带</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=帽子">帽子</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=围巾">围巾</a>
										<a
												href="${pageContext.request.contextPath}/coursesearch?search=手套">手套</a>
									</dd>
								</dl>
								<dl class="dl-hor">
									<dt>
										<a href="${pageContext.request.contextPath}/coursesearch?search=手表">手表</a>
									</dt>
									<dd>
										<a href="${pageContext.request.contextPath}/coursesearch?search=机械表">机械表</a><a
											href="${pageContext.request.contextPath}/coursesearch?search=石英表">石英表</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=电子表">电子表</a>
									</dd>
								</dl>
								<dl class="dl-hor">
									<dt>
										<a href="${pageContext.request.contextPath}/coursesearch?search=饰品">饰品</a>
									</dt>
									<dd>
										<a href="${pageContext.request.contextPath}/coursesearch?search=眼镜">眼镜</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=手链">手链</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=项链">项链</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=吊坠">吊坠</a>
									</dd>
								</dl>
								<dl class="dl-hor">
									<dt>
										<a href="${pageContext.request.contextPath}/coursesearch?search=收藏品">收藏品</a>
									</dt>
									<dd>
										<a href="${pageContext.request.contextPath}/coursesearch?search=古玩">古玩</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=邮票">邮票</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=钱币">钱币</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=陶瓷">陶瓷</a>
									</dd>
								</dl>
							</div>
						</li>

						<li class="list-group-item"><a href="${pageContext.request.contextPath}/coursesearch?search=学习用品">学习用品</a>
							<div class="sort-detail">
								<dl class="dl-hor">
									<dt>
										<a href="${pageContext.request.contextPath}/coursesearch?search=编码">编码</a>
									</dt>
									<dd>
										<a href="${pageContext.request.contextPath}/coursesearch?search=Java">Java</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=PHP">PHP</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=C">C++</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=Python">Python</a>
									</dd>
								</dl>
								<dl class="dl-hor">
									<dt>
										<a href="${pageContext.request.contextPath}/coursesearch?search=培训">培训</a>
									</dt>
									<dd>
										<a href="${pageContext.request.contextPath}/coursesearch?search=驾照">驾照</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=考研">考研</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=计算机证书">计算机证书</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=四六级">四六级</a>
									</dd>
								</dl>
								<dl class="dl-hor">
									<dt>
										<a href="${pageContext.request.contextPath}/coursesearch?search=线上课程">线上课程</a>
									</dt>
									<dd>
										<a href="${pageContext.request.contextPath}/coursesearch?search=健身">健身</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=考证">考证</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=学习">学习</a>
									</dd>
								</dl>
							</div>
						</li>

						<li class="list-group-item"><a href="${pageContext.request.contextPath}/coursesearch?search=闲置百货">百货</a>
							<div class="sort-detail">
								<dl class="dl-hor">
									<dt>
										<a href="${pageContext.request.contextPath}/coursesearch?search=日用">日用</a>
									</dt>
									<dd>
										<a href="${pageContext.request.contextPath}/coursesearch?search=雨伞">雨伞</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=口罩">口罩</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=拖布">拖布</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=电风扇">电风扇</a>
									</dd>
								</dl>
								<dl class="dl-hor">
									<dt>
										<a href="${pageContext.request.contextPath}/coursesearch?search=餐具">餐具</a>
									</dt>
									<dd>
										<a href="${pageContext.request.contextPath}/coursesearch?search=餐盘">餐盘</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=保温杯">保温杯</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=饭盒">饭盒</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=餐具套装">餐具套装</a>
									</dd>
								</dl>
								<dl class="dl-hor">
									<dt>
										<a href="${pageContext.request.contextPath}/coursesearch?search=出行">出行</a>
									</dt>
									<dd>
										<a href="${pageContext.request.contextPath}/coursesearch?search=自行车">自行车</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=电动车">电动车</a> <a
											href="${pageContext.request.contextPath}/coursesearch?search=滑板">滑板</a>
									</dd>
								</dl>
							</div>
						</li>
					</ul>
				</div>

			</div>
			<div id="mycarousel" style="width: 75%;
    float: left;
    margin-left: 1%;" class="carousel slide" data-ride="carousel">
				<div class="carousel-inner">
					<div class="item active">
						<img src="style/image/index/6.png" alt="">
					</div>

					<div class="item">
						<img src="style/image/index/5.png" alt="">
					</div>
					<div class="item">
						<img src="style/image/index/4.png" alt="">
					</div>
				</div>

				<ol class="carousel-indicators">
					<li data-target="#mycarousel" data-slide-to="0" class="active"></li>
					<li data-target="#mycarousel" data-slide-to="1"></li>
					<li data-target="#mycarousel" data-slide-to="2"></li>
				</ol>

				<a class="left carousel-control" href="#mycarousel" role="button"
				   data-slide="prev" style="display: none;"> <span
						class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a> <a class="right carousel-control" href="#mycarousel" role="button"
						data-slide="next" style="display: none;"> <span
					class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
			</div>
			<div class="clear-float"></div>
		</div>
	</div>



	<div class="row clearfix">
		<div class="col-md-12 column">
			<div class="row clearfix">
				<div class="col-md-12 column">

					<div class="row clearfix" style="margin-top: 3%">
						<div class="col-md-12 column" >
							<img alt="140x140" src="style/image/free.JPG" />
							<div class="row clearfix">
								<c:forEach var="course" items="${freecourses}" begin="0" end="2">
									<div class="col-md-4 column" >
										<!--Regular if23-->
										<div class="uc-coursecard uc-ykt-coursecard f-fl">
											<a target="_blank" class="j-href"
												href="coursedetail?id=${course.id}">
												<div class="uc-ykt-coursecard-wrap f-cb f-pr">
													<div class="uc-ykt-coursecard-wrap_box">
														<div class="uc-ykt-coursecard-wrap_picbox f-pr">
															<img class="imgPic j-img"
																src="<c:url value="${pageContext.request.contextPath}/ExRes/${course.pic}?imageView&amp;thumbnail=223y124&amp;quality=100"/>"
																data-src="" alt="课程图片">
															<div class="m-showLectorTag f-pa" style="display: none;">老师参与</div>
														</div>
														<div class="uc-ykt-coursecard-wrap_tit">
															<h3 class="">${course.name}</h3>
														</div>
														<div class="uc-ykt-coursecard-wrap_orgName f-fs0 f-thide">
															${course.context}</div>
														<div
															class="uc-ykt-coursecard-wrap_scorewrap f-thide f-cb f-pa">
															<div class="m-scorecnt f-fl f-cb">
																<div class="uc-starrating">

																	<span class="uc-starrating_score">${course.label }</span>
																</div>
															</div>
															<div class="m-hot f-fl">
																<!--Regular if24-->
																(${course.hour }人学过)

															</div>
														</div>
														<div class="uc-ykt-coursecard-wrap_price f-pa">
															<!--Regular if25-->
															<span class="u-free">免费</span>

														</div>
														<!--Regular if26-->
													</div>
												</div>
											</a>
										</div>
									</div>
								</c:forEach>


							</div>
						</div>
					</div>
					<div class="row clearfix" style="margin-top: 3%">
						<div class="col-md-12 column">
							<img alt="140x140" src="style/image/nofree.JPG" />
							<div class="row clearfix">
								<c:forEach var="course" items="${vipcourses}" begin="0" end="2">

									<div class="col-md-4 column">
										<!--Regular if23-->
										<div class="uc-coursecard uc-ykt-coursecard f-fl">
											<a target="_blank" class="j-href"
												href="coursedetail?id=${course.id}">
												<div class="uc-ykt-coursecard-wrap f-cb f-pr">
													<div class="uc-ykt-coursecard-wrap_box">
														<div class="uc-ykt-coursecard-wrap_picbox f-pr">
															<img class="imgPic j-img"
																src="<c:url value="${pageContext.request.contextPath}/ExRes/${course.pic}?imageView&amp;thumbnail=223y124&amp;quality=100"/>"
																data-src="" alt="课程图片">
															<div class="m-showLectorTag f-pa" style="display: none;">老师参与</div>
														</div>
														<div class="uc-ykt-coursecard-wrap_tit">
															<h3 class="">${course.name}</h3>
														</div>
														<div class="uc-ykt-coursecard-wrap_orgName f-fs0 f-thide">
															${course.context}</div>
														<div
															class="uc-ykt-coursecard-wrap_scorewrap f-thide f-cb f-pa">
															<div class="m-scorecnt f-fl f-cb">
																<div class="uc-starrating">

																	<span class="uc-starrating_score">${course.label }</span>
																</div>
															</div>
															<div class="m-hot f-fl">
																<!--Regular if24-->
																(${course.hour }人学过)

															</div>
														</div>
														<div class="uc-ykt-coursecard-wrap_price f-pa">
															<!--Regular if25-->
															<span class="u-free">会员免费</span>

														</div>
														<!--Regular if26-->
													</div>
												</div>
											</a>
										</div>

									</div>
								</c:forEach>

							</div>
						</div>
					</div>
                    <div class="row clearfix" style="margin-top: 3%">
						<div class="col-md-12 column">
							<img alt="140x140" src="style/image/userstory.png" />
							<%--<div class="row clearfix">--%>
                                <%--<video  controls autoplay>--%>
                                    <%--<source src="style/video/show.mp4" type="video/mp4">--%>
                                    <%--<!--因为我的视频格式是ogg，所以路径的视频格式为ogg，下边注释的地方，就是你的视频什么格式就弄什么格式！-->--%>
                                    <%--<!--<source src="img/video/movie.mp4" type="video/mp4">--%>
                                    <%--<source src="movie.webm" type="video/webm">-->--%>
                                    <%--<object data="movie.mp4" >--%>
                                        <%--<embed src="img/video/movie.swf">--%>
                                    <%--</object>--%>
                                <%--</video>--%>
							<%--</div>--%>
							<img data-toggle="modal" data-target="#myModal" alt="" src="style/image/index/index1.png" width="100%"
								  />

							<img data-toggle="modal" data-target="#myModal" alt="" src="style/image/index/index2.png" width="100%"
								  />
							<div align="center">
								<img data-toggle="modal" data-target="#myModal" alt="" src="style/image/index/index3_2.png"   align="middle"  />
							</div>
							<br>
							<div  align="center">
								<a href="course" style="text-align:center">
								<button type="button" class = "btn btn-success btn-lg" >开启学习之旅</button>
								</a>
							</div>

						</div>
					</div>
				</div>
			</div>
			<img data-toggle="modal" data-target="#myModal" width="100%" src="style/image/bottom2.JPG" />




		</div>
	</div>
</div>

<%--<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">视频</button>--%>
<!-- 模态框（Modal） -->
<div class="modal fade "  id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<%--<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>--%>
			</div>
			<div class="modal-body">
				<video width="468" height="267" src="style/video/show.mp4"  controls>您的浏览器不支持video标签</video>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<%--<button type="button" class="btn btn-primary">提交更改</button>--%>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
<footer style="text-align: center">
<hr>
<p class="am-padding-left">
	© 2021 <a href="#">仲恺农业工程学院</a>.
</p>
</br>
</br>
</br>
</footer>

</body>
</html>